<template>
	<el-menu
		:default-active="routeStore.currentActiveRoute"
		background-color="transparent"
		:collapse="props.isCollapse"
		:unique-opened="props.isUniqueOpened"
		:collapse-transition="props.isCollapseTransition"
		class="dx-menu"
		:class="{ 'dx-menu-select-bg-color': props.isOpenSelectBgColor }"
		@select="onMenuSelect"
	>
		<template v-for="val in props.menuList">
			<el-sub-menu :index="val.menu_id" v-if="val.children && val.children.length > 0" :key="val.menu_id">
				<template #title>
					<dx-icon color="#ffffff" size="16" :name="val.icon" class="mr-5px"></dx-icon>
					<span>{{ val.name }}</span>
				</template>
				<sub-item :child-list="val.children" />
			</el-sub-menu>
			<template v-else>
				<el-menu-item :index="val.url" :key="val.url">
					<dx-icon
						:color="iconColor(val.url)"
						size="16"
						:name="val.icon"
						class="mr-5px"
					></dx-icon>
					<template #title v-if="!val.is_link">
						<text>{{ val.name }}</text>
					</template>
					<template #title v-else>
						<a :href="val.is_link" target="_blank" rel="opener" class="w100">{{ val.name }}</a>
					</template>
				</el-menu-item>
			</template>
		</template>
	</el-menu>
</template>

<script setup lang="ts">
import subItem from './subItem.vue';
import { dtoMenuList } from '@/uni_modules/dx-admin/types/interface';
import { useRouteStore } from '@/uni_modules/dx-admin/stores/routes';
import { useThemeStore } from '../../stores/theme';
import { computed } from 'vue';
const props = defineProps<{
	menuList: dtoMenuList[];
	isCollapse: boolean;
	isUniqueOpened: boolean;
	isCollapseTransition: boolean;
	isOpenSelectBgColor: boolean;
}>();
const routeStore = useRouteStore();
const themeStore = useThemeStore();
const iconColor = computed(()=>(url:string)=>{
	let status = routeStore.currentActiveRoute === url;
	if(themeStore.isOpenSelectBgColor){
		return status ? themeStore.menuHighlightColor : '#ffffff';
	}else{
		return status?'var(--el-menu-active-color)':'#ffffff'
	}
})
function onMenuSelect(index: string) {
	uni.navigateTo({
		url: index,
	});
}
</script>
